<template>
	<view class="hotzone-wrap">
		<image :src="$url.cdn(data.src)" style="width: 100%" mode="widthFix"></image>
		<view
			class="hotzone-box ss-flex ss-col-center"
			v-for="item in data.list"
			:key="item.width"
			:style="[
				{
					top: item.top + 'rpx',
					left: item.left + 'rpx',
					width: item.width + 'rpx',
					height: item.height + 'rpx',
				},
			]"
			@tap.stop="$router.go(item.url)"
		>
		{{item.text}}
		</view>
	</view>
</template>

<script setup>
	import $url from '/shop/url/index.js';
	import $router from '/shop/router/index.js';
	// 接收参数
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
</script>

<style lang="scss" scoped>
	.hotzone-wrap {
		position: relative;
	}
	.hotzone-box {
		position: absolute;
		font-size: 25rpx;
	}
</style>
